<template>
  <div class="goods">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
        <el-breadcrumb-item v-if="!search">分类</el-breadcrumb-item>
        <el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
        <el-breadcrumb-item v-if="search">{{search}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 选项卡 -->
    <div class="nav">
      <div class="product_nav">
        <div class="title">分类</div>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane
            v-for="item in categoryList"
            :key="item.category_id"
            :label="item.category_name"
            :name="''+item.category_id"
          ></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- main -->
    <div class="main">
      <!-- 内容列表(是否有数据) -->
      <div class="list" v-if="allProduct.length">
        <goods-list :goodsData="allProduct"></goods-list>
      </div>
      <div class="list" v-else>
        <h6>抱歉没有找到相关的商品，请看看其他的商品</h6>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="currentChange"
          :page-size="queryInfo.pageSize"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import goodsAPI from "../request/api/goodsAPI";
export default {
  name: "VueStoreGoods",
  data() {
    return {
      activeName: "", //选项卡切换名称
      categoryList: [], //当前商品分类数据  0:category_id: 0 ,category_name: "全部"
      allProduct: [], //商品数据绑定
      // 分页
      queryInfo: {
        categoryID: [], //分类id
        currentPage: 1, //当前页
        pageSize: 15, //每页显示多少条
      },
      total: 0, //总条数
      search: "", // 搜索
    };
  },
  created() {
    // 分类列表数据请求
    this.getCategory();
  },
  // activated()函数就是一个页面激活后的钩子函数，一进入页面就触发
  // 运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中
  activated() {
    console.log("this.$route.query===>", this.$route.query);

    let search = this.$route.query.search;
    if (search) {
      this.search = search;
      this.getProductBySearch();
      return;
    }
    //如果this.$globalData.$categoryArr存在长度 就证明是点击浏览更多按钮进入页面的
    if (this.$globalData.$categoryArr.length) {
      this.queryInfo.categoryID = this.$globalData.$categoryArr;
      this.$globalData.$categoryArr = [];
      this.activeName = "-1";
      this.getProduct();
    } else {
      //证明用户直接点击链接进入当前页面或者刷新页面进入的
      let num = Number(this.activeName);
      this.activeName = num !== -1 ? this.activeName : "0";
    }
  },

  mounted() {},

  methods: {
    //获取分类列表数据
    async getCategory() {
      let { data: res } = await goodsAPI.getCategory();
      console.log(res);
      this.categoryList = res.category;
      // 数组开头添加新的元素
      this.categoryList.unshift({
        category_id: 0,
        category_name: "全部",
      });
    },
    //获取商品数据
    async getProduct() {
      // 判断是否有分类商品id，如果没有请求全部数据，如果有id请求id商品数据
      let apiName = this.queryInfo.categoryID.length
        ? "getProductByCategory"
        : "getAllProduct";
      let { data: res } = await goodsAPI[apiName](this.queryInfo);
      console.log(res);
      this.allProduct = res.Product;
      this.total = res.total;
    },
    //分页
    currentChange(currentPage) {
      this.queryInfo.currentPage = currentPage;
      // 有数据调用搜索请求数据
      if (this.search) {
        this.getProductBySearch;
      } else {
        this.getProduct();
      }
    },
    // 获取搜索数据
    async getProductBySearch() {
      let data = {
        currentPage: this.queryInfo.currentPage,
        pageSize: 15,
        search: this.search,
      };
      let { data: res } = await goodsAPI.getProductBySearch(data);
      console.log(res);
      this.allProduct = res.Product;
      this.total = res.total;
    },
  },
  watch: {
    //选项卡切换监听
    activeName(val) {
      console.log(val);
      //切换从第一页开始
      this.queryInfo.currentPage = 1;
      this.total = 0;
      // 选项卡点击转换为数字类型
      let categoryID = Number(val);
      //把选项卡点击的下标给选项卡分类id(总数据/当前分类id数据)
      this.queryInfo.categoryID = categoryID === 0 ? [] : [categoryID];

      this.getProduct();
    },
    // 路由监听
    $route(val) {
      // val搜索条件改变
      console.log(val);
      if (val.query.search) {
        // 更新搜索条件
        this.search = val.query.search;
        this.activeName = "-1";
        // 从第一页开始
        this.queryInfo.currentPage = 1;
        this.total = 0;
        // 重新调用搜索
        this.getProductBySearch();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.goods {
  background-color: #f5f5f5;

  .breadcrumb {
    margin: 0 auto;
    width: 1225px;
    height: 50px;
    background-color: #ffffff;
  }

  .nav {
    background-color: #ffffff;

    .product_nav {
      margin: 0 auto;
      width: 1225px;
      height: 40px;
      line-height: 40px;

      .title {
        float: left;
        width: 50px;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }

  .main {
    margin: 0 auto;
    max-width: 1225px;

    .list {
      min-height: 650px;
      margin-top: 14.5px;
      margin-left: -13.7px;
      overflow: auto;
    }

    .pagination {
      height: 50px;
      text-align: center;
    }
  }
}
</style>